<template>
	<view class="mainPage" :style="{height:screenHeight + 'px'}">
		<view class="Logo" :style="{top: logoTop+'rem'}">
			<image src="../../static/image/teamLogo.png"></image>
		</view>
		
		<view class="main">
			<uni-transition ref="ani" custom-class="transition" :duration="325"
							mode-class="slide-right" :show="loginShow">
					<view class="loginArea">
						<view class="loginInputArea">
							<input @focus="inputAccount" @input="getAccount" @blur="accountInputing = false" 
								   placeholder="账号" 
								   style="transition: all 0.4s ease-in;" :class="[accountInputing == true?'inputing':'']">
							
							<input type="safe-password" password @focus="inputPwd"  @input="getPwd" @blur="passwordsInputing = false" 
							       placeholder="密码" 
								   style="margin-top: 50rpx; transition: all 0.4s ease-in;" :class="[passwordsInputing == true?'inputing':'']">
						</view>
						
						<view id="otherOptions">
							<view class="forget" @click="findPwd">
								忘记密码？
							</view>
							<view class="register" @click="gotoRegister">
								注册账号
							</view>
						</view>
						
						<view class="loginButton" @click="sendLoginInfo(account, passwords)">
							登录
						</view>
					</view>					
			</uni-transition>	
			
			
			<uni-transition ref="ani" custom-class="transition"  :duration="325"
							mode-class="slide-left" :show="registerShow">
				<view class="registerArea">
					<view class="registerInput">
						<input type="text" placeholder="请设置账号" @input="setAccount">
						<input type="text" password=true placeholder="请输入密码" @input="setPwd">
						<input type="password" placeholder="请再次输入密码确认" @blur="check" @input="confirmPwd">
						<input type="text" placeholder="请输入电子邮箱" @input="getEmail">
						<view class="code">
							<input type="number" maxlength=6 placeholder="请输入验证码" @input="getInputCode">
							<view class="sendCode" @click="getCode" :style="{opcity: isSendCode==true?1:0.618}">
								<view v-if="isSendCode">
									{{wait}}秒后可再次发送
								</view>
								<view v-if="!isSendCode">
									发送验证码
								</view>
							</view>
						</view>
					</view>
					
					<view class="gotoLogin" @click="gotoLogin">
						返回登录
					</view>
					
					<view class="sendRegister" @click="sendRegisterInfo()">
						注册
					</view>
				</view>
				
			</uni-transition>
		</view>	
	</view>
</template>

<script>
//import axios from 'axios';
	export default{
		data(){
			return{
				loginShow: true,
				registerShow: false,
				isSendCode: false,
				loginOpacity: 1,
				registerOpacity: 0,
				wait: 0,
				timer:null,
				accountInputing: false,
				passwordsInputing: false,
				screenHeight: 0,
				isLogin: false,
				isRegister: false,
				appLogo: require("../../static/image/teamLogo.png"),
				logoTop: (this.isLogin||this.isRegister)?3:6,
				inputTop: (this.isLogin||this.isRegister)?13:18,
				account: null,
				passwords: null,
				loginWidth: '45%',
				registerWidth: '45%',
				needCode: null,
				registerInfo:{
					newAccount: null,
					newPasswords: '',
					confirmPwd:'',
					email:'',
					code:'',
					pass: false, //pass作用是判断账户是否合法，在点击注册时使用
				},
			}
		},
		methods:{
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.screenHeight = res.screenHeight;
					}
				})
				let oldP = uni.getStorageSync('passwords')
				let oldA = uni.getStorageSync('account')
				
				if(oldA && oldP){
					this.sendLoginInfo(oldA, oldP)
				}
			},
			inputAccount(){
				this.accountInputing = true
			},
			inputPwd(){
				this.passwordsInputing = true
			},
			sendRegisterInfo(){
				// uni.request({
				// 	url:"http://192.168.31.146:8090/user/front/register",
				// 	method:"POST",
				// 	data:{
				// 		userName:this.registerInfo.newAccount,
				// 		password:this.registerInfo.newPasswords,
				// 		rePassword:this.registerInfo.confirmPwd,
				// 		mail:this.registerInfo.email,
				// 		code:this.registerInfo.code.toString()
				// 	}
				// })
				this.$http.post('/user/front/register', {
					userName:this.registerInfo.newAccount,
					password:this.registerInfo.newPasswords,
					rePassword:this.registerInfo.confirmPwd,
					mail:this.registerInfo.email,
					code:this.registerInfo.code.toString()
				})
				.then(res => {
					//console.log(res)
					if(res.data.data.message == '用户已存在'){
						Object.keys(this.registerInfo).forEach(key => this.registerInfo[key] = undefined)
						uni.showToast({
							title:"账号已存在，换个账号试试吧",
							duration:2000,
							icon:'none'
						})
					}else{
						//console.log("login");
						uni.setStorageSync('xdznAppUser', {
							account: this.registerInfo.newAccount,
							passwords: this.registerInfo.newPasswords
						}) // 存入cookies
						
						uni.showToast({
							title:"注册成功！请登录账号吧",
							icon:"none",
							duration: 2000
						})
						
						uni.redirectTo({
							url:"./loginAndRegister"
						})
					}
				})
			},
			openPolling(){
				
			},
			sendLoginInfo(account, passwords){	
				uni.request({
					url:"http://162.14.102.246:8090/user/front/login",
					method:"POST",
					data:{
						name:account,
						password:passwords
					},
				})
				// this.$http.post('/user/front/login', {
				// 	name:this.account,
				// 	password:this.passwords
				// })
				.then(res => {
					if(res.data.message=="账号密码错误"){
						uni.showToast({
							icon:'error',
							title:"账号或密码错误",
							duration:1200
						})
					}else if(res.data.code == 200){ //登陆成功
						let token = res.data.data.token
						this.$store.state.loginUser.token = res.data.data.token
						uni.removeStorage({key:'xdzn_token'})
						uni.setStorageSync('xdzn_token', res.data.data.token)
						
						let pwd = uni.getStorageSync('passwords')
						let act = uni.getStorageSync('account')
						
						if(!act && !pwd){
							uni.removeStorage({key:'passwords'})
							uni.removeStorage({key:'account'})
							uni.setStorageSync('passwords',passwords)
							uni.setStorageSync('account',account)
						}
						this.$store.state.loginUser.tokenUser = res.data.data.tokenName
						
						// uni.request({
						// 	url:"http://192.168.31.146:8090/user/front/info",
						// 	method:"GET",
						// 	header:{
						// 		xdzn_token: this.$store.state.loginUser.token
						// 	}
						// })
						uni.request({
							url: 'http://162.14.102.246:8090/user/front/info',
							method:'GET',
							header:{
								xdzn_token: this.$store.state.loginUser.token
							}
						})
						.then(res => {
							//console.log('数据分配',res)
							
							let id = res.data.data.info.id;
							let data = res.data.data.info;
							this.$store.state.loginUser.userBaseInfo.avatar = data.avatar;
							this.$store.state.loginUser.userBaseInfo.id = data.id;
							this.$store.state.loginUser.userBaseInfo.introduce = data.introduce != null?data.introduce:'';
							this.$store.state.loginUser.userBaseInfo.nickname = data.nickname;
							this.$store.state.loginUser.userBaseInfo.ownInfo.school = data.school;
							this.$store.state.loginUser.userBaseInfo.userName = data.userName;
							// this.$store.state.loginUser.status = data.status;
							// this.$store.state.loginUser.userBaseInfo.fansCount = data.fansCount!=null?data.fansCount:0;
							// this.$store.state.loginUser.userBaseInfo.concernCount = data.concernCount!=null?data.concernCount:0;
							// this.$store.state.loginUser.articleTotal = data.articleTotal;
							// this.$store.state.loginUser.userBaseInfo.blogUrl = data.blogUrl!=null?data.blogUrl:'';
							// this.$store.state.loginUser.userBaseInfo.geo = data.geo;
							// this.$store.state.loginUser.userBaseInfo.ownInfo.age = data.age!=null?data.age:'';
							// this.$store.state.loginUser.userBaseInfo.ownInfo.sex = data.sex!=null?data.sex:'';
							// this.$store.state.loginUser.userBaseInfo.ownInfo.major = data.major!=null?data.major:'';
							// this.$store.state.loginUser.userBaseInfo.background = data.background!=null?data.background:"https://img1.baidu.com/it/u=3579885558,1908697717&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800";
							
							// this.$store.state.loginUser.userBaseInfo.tagList = data.tagList;
							
							uni.request({
								url:'http://162.14.102.246:8090/user/front/homePage/'+id,
								method:'GET',
								header:{
									xdzn_token:this.$store.state.loginUser.token
								}
							}).then(res => {
								let data1 = res.data.data.home;
								//console.log('data1' ,data1)
								//console.log(data1)
								this.$store.state.loginUser.userBaseInfo.id = data1.id;
								this.$store.state.loginUser.status = data1.status;
								this.$store.state.loginUser.userBaseInfo.fansCount = data1.fansCount!=null?data1.fansCount:0;
								this.$store.state.loginUser.userBaseInfo.concernCount = data1.concernCount!=null?data1.concernCount:0;
								this.$store.state.loginUser.articleTotal = data1.articleTotal;
								this.$store.state.loginUser.userBaseInfo.blogUrl = data.blogUrl!=null?data1.blogUrl:'';
								this.$store.state.loginUser.userBaseInfo.geo = data1.geo;
								this.$store.state.loginUser.userBaseInfo.ownInfo.age = data1.age!=null?data1.age:'';
								this.$store.state.loginUser.userBaseInfo.ownInfo.sex = data1.sex!=null?data1.sex:'';
								this.$store.state.loginUser.userBaseInfo.ownInfo.major = data1.major!=null?data1.major:'';
								this.$store.state.loginUser.userBaseInfo.background = data1.background!=null?data1.background:"https://img1.baidu.com/it/u=3579885558,1908697717&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800";
								
								data1.tagList.forEach((item)=>{
									this.$store.state.loginUser.userBaseInfo.tagList.push(item.tagName)
								})
								//console.log(this.$store.state.loginUser.userBaseInfo.tagList)
								
								uni.reLaunch({
									//url:"forum",
									url:'./userHomeFrames/Home?id='+data1.id,
									success: () => {
										//websocket 连接启动
										//this.$ws.init() //登录成功则连接websocket
										this.$store.state.webSocketUtil.fromUser = data1.id
										//开启轮询
										
									}
								})
							})
							
							//跳转到首页, 首页有tabbar，应该使用swithTab
							
							//在这里获取论坛数据，然后传到url里去接收
							
							//console.log("ready")
						})
					}
				})
			},
			getAccount(e){
				this.account = e.detail.value;
			},
			getPwd(e){
				this.passwords = e.detail.value;
			},
			setAccount(e){
				this.registerInfo.newAccount = e.detail.value
			},
			setPwd(e){
				this.registerInfo.newPasswords = e.detail.value
			},
			confirmPwd(e){
				this.registerInfo.confirmPwd = e.detail.value;
			},
			getEmail(e){
				this.registerInfo.email = e.detail.value
				console.log(this.registerInfo.email)
			},
			getInputCode(e){
				this.registerInfo.code = e.detail.value;
			},
			check(){
				if(this.registerInfo.newPasswords && (this.registerInfo.newPasswords != this.registerInfo.confirmPwd)){
					uni.showToast({
						title:"两次密码不一致，请检查！",
						icon:"none",
						duration: 1500,
					})
				}
			},
			codeChange(text) {
				this.registerInfo.code = text;
			},
			async getCode(){
					if(this.registerInfo.email){
						if(!this.isSendCode && this.wait == 0){
							// 模拟向后端请求验证码
							uni.request({
								methods:"GET",
								url: `http://162.14.102.246:8090/user/mails/mailCode/${this.registerInfo.email}`
								//url: `http://192.168.31.146:8090/user/mails/mailCode/${this.registerInfo.email}`
							}).then(res => {
								if(res.data.code = 200){
									uni.showToast({
										icon:"none",
										title: "验证码已发送",
										duration:1000
									})
								}else{
									uni.showToast({
										icon:"none",
										title:"验证码发送失败，请稍后重试失败",
										duration:1000
									})
								}
								
								this.wait = 60
								
								if (!this.timer) {
									this.isSendCode = true
									this.timer = setInterval(() => {
										if (this.wait > 0 && this.wait <= 60) {
											this.wait--;
										} else {
											this.isSendCode = false;
											clearInterval(this.timer);
											this.timer = null;
										}
									}, 1000)
								}
							})
							/*
							  uni.showLoading({
								title: '正在获取验证码'
							  })
							  setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							  }, 1000);
							} else {
							  uni.$u.toast('倒计时结束后再发送');
							}	*/
						}else if(!this.isSendCode && this.wait != 0){
							uni.showToast({
								icon:"none",
								title:"请等待"+this.wait+"秒后再发送",
								duration: 1000
							})
						}
					}else{
						uni.showToast({
							icon:"none",
							title: "请先输入正确的邮箱地址",
							duration: 1500
						})
					}
			},
			gotoRegister(){
				//this.loginOpacity = 0,
				
				setTimeout(()=>{
					this.registerShow = true
				}, 300)
				this.loginShow = false
				
				//this.registerOpacity = 1                    
				
			},
			gotoLogin(){
				
				setTimeout(() => {
					this.loginShow = true
				}, 300)
				this.registerShow = false
			},
			findPwd(){
				uni.navigateTo({
					url:'./forgetPwd?screenHeight='+this.screenHeight
				})
			}
		},
		computed:{
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style scoped>
	.inputRegister, .input{
		margin-top: 1rem;
		width: 100%;
	}
	.mainPage{
		width: 100%;
		background-image: linear-gradient(to bottom right, #F8F8F6, #AECDE0, #2DA8D8);
		display: flex;
		justify-content: center;
	}
	.Logo{
		position: relative;
		display: flex;
		height: 10rem;
		transition: all 0.5s linear;
	}
	.Logo>image{
		width: 10rem;
		height: 10rem;
	}

	.main{
		position: absolute;
		width: 100%;
		height: 50%;
		top: 33%;
	}
	.loginArea{
		position: relative;
		width: 76%;
		height: 250rpx;
		margin: 0 auto;
	}
	input{
		position: relative;
		width: 90%;
		height: 90rpx;
		border-radius: 50rpx;
		border: #F8F8F6;
		background-color: azure;
		font-size: 1rem;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		letter-spacing: 3rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		color: rgba(189, 189, 189, 1.0);
	}
	.inputing{
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.6);
	}
	.loginButton{
		position: relative;
		top: 100%;
		width: 75%;
		height: 100rpx;
		letter-spacing: 0.5rem;
		display: flex;
		border-radius: 50rpx;
		justify-content: center;
		align-items: center;
		font-size: 1.2rem;
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.6);
		color: white;
		margin: 0 auto;
		font-weight: bold;
		background-color: deepskyblue;
	}
	#otherOptions{
		width: 100%;
		position: relative;
		top: 20rpx;
		display: flex;
		justify-content: space-around;
		color: #2DA8D8;
	}
	.forget{
		margin-left: 10rpx;
	}
	.register{
		margin-right: 10rpx;
	}
	.registerArea{
		position: relative;
		width: 76%;
		height: 800rpx;
		margin: 0 auto;
	}
	.registerInput{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.registerInput>input{
		margin-bottom: 30rpx;
	}
	.code{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}
	.code>input{
		width: 50%;
	}
	.sendCode{
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30%;
		height: 100%;
		background-color: #2DA8D8;
		padding: 15rpx;
		border-radius: 10rpx;
	}
	.sendRegister{
		position: relative;
		top: 25%;
		width: 75%;
		height: 100rpx;
		letter-spacing: 0.5rem;
		display: flex;
		border-radius: 50rpx;
		justify-content: center;
		align-items: center;
		font-size: 1.2rem;
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.6);
		color: white;
		margin: 0 auto;
		font-weight: bold;
		background-color: deepskyblue;
	}
	.gotoLogin{
		position: relative;
		top: 5%;
		color: #2DA8D8;
		left: 2%;
	}
</style>